import React, { useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import {
  Button,
  Card,
  Col,
  Form,
  Input,
  InputNumber,
  Result,
  Row,
  Space,
  Steps,
  Typography,
} from 'antd';
import { FormattedMessage, request, useIntl } from 'umi';
import ProForm from '@ant-design/pro-form';
import wizard1 from '@/assets/wizard1.svg';
import wizard2 from '@/assets/wizard2.svg';

const { Text } = Typography;
const { Step } = Steps;
export default (): React.ReactNode => {
  const intl = useIntl();
  const [current, setCurrent] = useState<any>(0);
  const [loading, setLoading] = useState<boolean>(false);

  const InitAction = (act: string, step: number = 0) => {
    setLoading(true);
    request('/api/services/app/SysConfig/' + act, {
      method: 'POST',
    }).then((response) => {
      if (response.success) {
        setCurrent(step);
      }
      setLoading(false);
    });
  };
  const InitConfig = (values: any) => {
    setLoading(true);
    request('/api/services/app/SysConfig/Create', {
      method: 'POST',
      data: values.company,
    }).then((response) => {
      if (response.success) {
        setCurrent(4);
      }
      setLoading(false);
    });
  };
  const GoWelcome = () => {
    window.open('/welcome');
  };
  const updateDatabase = () => {
    setLoading(true);
    request('/api/services/app/SysConfig/UpdateDatabase', {
      method: 'PUT',
    }).then((response) => {
      setLoading(false);   
      setCurrent(1);
    });
  };
  React.useEffect(() => {}, []);
  return (
    <PageContainer title={false} breadcrumbRender={false} ghost>
      <Card>
        <Steps current={current}>
          <Step title="数据库更新" description="将数据库更新至最新版本。" />
          <Step title="初始化菜单" description="初始化菜单以系统自动配置路由。" />
          <Step title="初始化多语言" description="设置系统多语言以适应本地化。" />
          <Step title="系统设置" description="设置系统基本参数，让系统能有效运行。" />
          <Step title="完成" />
        </Steps>
      </Card>
      <Card hidden={current > 0}>
        <Row gutter={16}>
          <Col span={8}>
            <img src={wizard1} style={{ width: '75%' }} />
          </Col>
          <Col span={12}>
            <p>
              OPERP在提供企业资源管理常用功能如：销售管理、采购管理、库存管理、生产管理、检验、财务等功能外，还提供了强大的报表设计、BOM工艺设计等特色。
            </p>
            <Button
              type="primary"
              size="large"
              onClick={updateDatabase}
              loading={loading}
            >
              {intl.formatMessage({ id: 'pages.system.updateDatabase', defaultMessage: 'Update Database' })}
            </Button>
          </Col>
        </Row>
      </Card>
      <Card hidden={current != 1}>
        <Row gutter={16}>
          <Col span={8}>
            <img src={wizard1} style={{ width: '75%' }} />
          </Col>
          <Col span={12}>
            <p>
              OPERP在提供企业资源管理常用功能如：销售管理、采购管理、库存管理、生产管理、检验、财务等功能外，还提供了强大的报表设计、BOM工艺设计等特色。
            </p>
            <Button
              type="primary"
              size="large"
              onClick={() => InitAction('InitMenus', 2)}
              loading={loading}
            >
              开始设置菜单
            </Button>
          </Col>
        </Row>
      </Card>
      <Card hidden={current != 2}>
        <Row gutter={16}>
          <Col span={8}>
            <img src={wizard2} width="75%" />
          </Col>
          <Col span={12}>
            <p>
              OPERP支持中、英、日、意、西班牙、印尼以及繁体语言等多种语言版本，通过设置各自的语言实现多语言的切换。
            </p>
            <Button
              type="primary"
              size="large"
              onClick={() => InitAction('InitLanguage', 3)}
              loading={loading}
            >
              初始化多语言
            </Button>
          </Col>
        </Row>
      </Card>
      <Card hidden={current != 3}>
        <ProForm
          initialValues={{
            autoLogin: true,
            tenant: 'Default',
          }}
          layout="horizontal"
          labelCol={{ span: 6 }}
          isKeyPressSubmit={true}
          submitter={{
            render: (_, dom) => {
              return (
                <Row gutter={16}>
                  <Col span={12}>
                    <Form.Item wrapperCol={{ offset: 6 }}>
                      <Space>{dom}</Space>
                    </Form.Item>
                  </Col>
                </Row>
              );
            },
            submitButtonProps: {
              loading: loading,
            },
            searchConfig: {
              submitText: (
                <span>
                  <FormattedMessage id="pages.save" defaultMessage="Save" />
                </span>
              ),
            },
          }}
          onFinish={(values) => {
            InitConfig(values);
            return Promise.resolve();
          }}
        >
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name={['company', 'id']} label="ID" hidden>
                <Input disabled style={{ width: 50 }} />
              </Form.Item>
              <Form.Item
                name={['company', 'companyName']}
                label="公司名称"
                rules={[
                  {
                    required: true,
                    message: '公司名称必填',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
              <Form.Item name={['company', 'address']} label="联系地址">
                <Input />
              </Form.Item>
              <Form.Item name={['company', 'telphone']} label="联系电话">
                <Input style={{ width: 200 }} />
              </Form.Item>
              <Form.Item
                name={['company', 'maxMRPTask']}
                label="MRP最大进程"
                rules={[
                  {
                    required: true,
                    message: 'MRP最大进程必填',
                  },
                ]}
              >
                <InputNumber min={1} max={99} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name={['company', 'startOrderNum']}
                label="起始订单号"
                rules={[
                  {
                    required: true,
                    message: '起始订单号必填',
                  },
                ]}
              >
                <InputNumber min={1000} />
              </Form.Item>
              <Form.Item
                name={['company', 'startPONum']}
                label="起始采购单号"
                rules={[
                  {
                    required: true,
                    message: '起始采购单号必填',
                  },
                ]}
              >
                <InputNumber min={1000} />
              </Form.Item>
              <Form.Item name={['company', 'jobNumPre']} label="工单号前缀">
                <Input style={{ width: 200 }} />
              </Form.Item>
              <Form.Item
                name={['company', 'startJobNum']}
                label="起始工单号"
                rules={[
                  {
                    required: true,
                    message: '起始工单号必填',
                  },
                ]}
              >
                <InputNumber min={1000} />
              </Form.Item>
            </Col>
          </Row>
        </ProForm>
      </Card>
      <Card hidden={current != 4}>
        <Result
          status="success"
          title="你已成功初始化系统。非常感谢您的支持与厚爱！"
          subTitle=""
          extra={[
            <Button type="primary" key="console" onClick={() => GoWelcome()}>
              马上开始
            </Button>,
            <Button onClick={() => setCurrent(0)}>重新设置</Button>,
          ]}
        />
      </Card>
    </PageContainer>
  );
};
